<template>
    <div id="SocialExperience">
        <!-- 这是社会经验实践页面 -->
     <div class="Header-wrapper">
            <yd-navbar title="填写社会经验" fontsize="16px" color="#fff" height="45px" bgcolor="#ffd602">
               <div slot="left" @click="golink">
                    <i class="iconfont icon-back Fcolor" ></i>
                </div>
                <div class="release-right" slot="right" @click="send">保存</div>
            </yd-navbar>
        </div>
      <div class="EducationalExperience-box-list">
           <div class="Q-wrapper">
            <div class="Q" v-for="(item,index) of radio" :key="item.id">
                <label><span>*</span>{{index+1}}.<span>{{item.question}}</span></label>
                <div class="radio-wrapper">
                    <yd-radio-group v-model="item.state" color="#ffd602" @change.native="radios(item.id,item.state,item.point)">
                        <yd-radio val=1>是</yd-radio>
                        <yd-radio val=2>否</yd-radio>
                    </yd-radio-group>
                </div>
            </div>
             <span class="bt">带*号必填</span>
        </div>
      </div>
    </div>
</template>
<script type="text/babel">
import apis from '../../../../../static/js/apis.js'
export default {
  data () {
    return {
      radio: [],
      userDate: [],
      point: '',
      fs: ''
    }
  },
  created () {
    this.$axios.post(
      apis + '/app/questionnaireController/list',
      this.confusion(
        JSON.stringify({
        })
      ),
      {
        headers: {
          Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
          'Content-Type': 'application/json;charset=UTF-8',
          'Cache-Control': 'no-cache',
          isApp: 'isApp'
        }
      }
    )
      .then(response => {
        this.userDate = response.data
        for (let i = 0; i < this.userDate.length; i++) {
          this.radio = this.radio.concat(
            {
              id: this.userDate[i].id,
              state: this.userDate[i].answer,
              question: this.userDate[i].question,
              point: this.fs
            }
          )
          if (this.radio[i].state === '1') {
            this.fs = '20'
            this.radio[i].point = this.fs
          } else {
            this.fs = '0'
            this.radio[i].point = this.fs
          }
          // console.log(this.radio[0])
        }
      })
      .catch(error => {
        console.log(error)
        this.$dialog.toast({
          mes: '服务器异常'
        })
      })
  },
  components: {
    apis
  },
  methods: {
    radios (id, val) {
      for (let i = 0; i < this.radio.length; i++) {
        if (this.radio[i].id === id) {
          this.radio[i].state = val
          if (this.radio[i].state === '1') {
            this.fs = '20'
            this.radio[i].point = this.fs
          } else {
            this.fs = '0'
            this.radio[i].point = this.fs
          }
        }
      }
    },
    golink () {
      window.history.go(-1)
    },
    send () {
      var arr = []
      this.radio.forEach(ele => {
        arr.push(ele.state)
      })
      if (arr.indexOf('0') !== -1) {
        this.$dialog.toast({
          mes: '请全部选择才可以保存'
        })
      } else {
        console.log(this.radio)
        this.$axios.post(
          apis + '/app/questionnaireController/add',
          this.confusion(
            JSON.stringify(
              this.radio
            )
          ),
          {
            headers: {
              Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
              'Content-Type': 'application/json;charset=UTF-8',
              'Cache-Control': 'no-cache',
              isApp: 'isApp'
            }
          }
        ).then(response => {
          this.$dialog.toast({
            mes: '修改成功',
            callback: () => {
              window.history.go(-1)
            }
          })
          this.userDate = response.data
        })
          .catch(error => {
            console.log(error)
            this.$dialog.toast({
              mes: '服务器异常'
            })
          })
      }
    }
  }
}

</script>
<style scoped>
.Q-wrapper{
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    padding: 10px 0;
    margin-top: 10px;
}
.Q{
    text-align: left;
    overflow: hidden;
    margin-bottom: 10px;
    padding: 0 12px;
    border-bottom: 1px solid #f1f1f1;
}
.Q label{
    font-size: 14px;
    color: #333;
    line-height: 24px;
}
.Q label span{
  color: red;
}
.radio-wrapper{
    width: 100%;
    margin: 20px 0;
}
.release-right {
  font-size: 12px;
  color: #fff;
}
.icon-back {
  font-size: 24px;
}
.Fcolor {
  color: #fff;
}
.EducationalExperience-box-list {
  background: #fff;
  width: 100%;
  overflow: hidden;
}
.bt{
  padding:0 12px;
  color: red;
  font-size: 12px;
}
</style>
